<template>
  <div class="goods-list">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <div>
            <el-input v-model="keyword" placeholder="搜索" clearable />
            <el-button type="primary" style="margin-left: 10px" @click="search"
              ><el-icon><Search /></el-icon>&nbsp;搜索</el-button
            >
            <el-button plain @click="refresh">
              <el-icon><Refresh /></el-icon>重置</el-button
            >
          </div>
          <div class="header-btn">
            <el-button type="primary" @click="addGoods" plain
              ><el-icon><Plus /></el-icon>&nbsp;新增</el-button
            >
            <!-- 点击修改的时候获取子组件的数据 -->
            <el-button
              type="success"
              @click="editGoods"
              plain
              :disabled="handleSelection.length != 1"
              ><el-icon><EditPen /></el-icon>&nbsp;修改</el-button
            >
            <!-- 点击删除的时候获取子组件的数据 -->
            <el-button
              type="danger"
              @click="deleteGoods"
              plain
              :disabled="handleSelection.length <= 0"
              ><el-icon><Delete /></el-icon>&nbsp;删除</el-button
            >
          </div>
        </div>
      </template>
      <!-- 子组件-表格 -->
      <goodsTable
        :goodsList="goodsList"
        @getChildSelection="getChildSelection"
        @getData="getData"
      />
      <!-- 分页器 -->
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        background
        hide-on-single-page
        layout="prev, pager, next, jumper, ->, total"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        style="padding-top: 20px"
      />
      <!-- 模态框 -->
      <goodsDialog ref="dialog" @getData="getData"></goodsDialog>
    </el-card>
  </div>
</template>

<script setup lang="ts">
// 商品列表
import goodsTable from "./goodsTable.vue";
import goodsDialog from "./goodsDialog.vue";
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
// 引入store
import { useStore } from "vuex";
const store = useStore();
var handleSelection = ref([]); //从子组件获取数据存放

const currentPage = ref(1); //分页器初始页
const pageSize = ref(10); //每页参数条数
const total = ref(); //全部数据条数

const keyword = ref(""); //分页器
const dialog = ref(); //子组件ref
let goodsList = ref([]);

// 发起请求获取商品列表
const getData = async () => {
  try {
    await store.dispatch("goods/getGoods", {
      start: currentPage.value,
      end: 10
    });
    //获取仓库种商品列表
    goodsList.value = store.getters["goods/getGoodsList"];
  } catch (error) {
    ElMessage.error(error.message || "获取商品数据失败");
  }
};

getData(); //捞数据

// 监听
const handleSizeChange = (val: any) => {
  console.log(`${val} items per page`);
};

// 监听页码数
const handleCurrentChange = (val: any) => {
  getData();
};

// 搜索
const search = () => {
  if (!keyword.value.trim()) return;
  ElMessage({
    message: "检索字段：" + keyword.value,
    type: "success",
    showClose: true
  });
};

// 搜索重置
const refresh = () => {
  keyword.value = "";
  ElMessage({
    message: "重置成功",
    type: "success",
    showClose: true
  });
};

// 新增
const addGoods = () => {
  dialog.value.openDialog("新增商品"); //打开窗口
};

// 修改(判断商品是否为下架状态)
const editGoods = () => {
  if (handleSelection.value[0].skuStatus == 1) {
    return ElMessage({
      type: "warning",
      message: `“${handleSelection.value[0].skuName}”是已上架商品，不能修改!`
    });
  }
  dialog.value.openDialog("修改商品", handleSelection.value[0]); //打开窗口
};

// 删除(判断商品是否上架，传入id删除)
const deleteGoods = () => {
  // 获取子组件的商品id 派发删除
  let handleName = []; //存放所有的name
  handleSelection.value.forEach((e) => {
    handleName.push(e.skuName);
  });
  ElMessageBox.confirm(
    `是否删除商品名称为“${handleName.join("，")}”的商品`,
    "Warning",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    }
  ).then(() => {
    handleSelection.value.forEach(async (e) => {
      if (e.skuStatus == 1) {
        ElMessage({
          type: "warning",
          message: `“${e.skuName}”是已上架商品，不能删除`
        });
      } else {
        // 发请求删除
        try {
          await store.dispatch("goods/deleteGoods", e.id);
          getData();
          ElMessage({
            type: "success",
            message: `商品“${e.skuName}”已被删除`
          });
        } catch (error) {
          ElMessage({
            type: "error",
            message: error.message
          });
        }
      }
    });
  });
};

// 自定义事件回调(获取子组件勾选的数据)
const getChildSelection = (value) => {
  handleSelection.value = value;
};
</script>

<style scoped lang="less">
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
.header-btn {
  margin-top: 20px;
}
</style>
